<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <style>
    #app {
      max-width: 1200px;
      width: 100%;
    }

    body {
      display: flex;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-for="value in item">
      <h1>{{value.path}}</h1>
      <h3>请求方法</h3>
      <p>{{value.method}}</p>
      <h3>请求参数</h3>
      <p v-if="value.params == null">不需要参数</p>
      <table border="1" cellspacing="0" cellPadding="6" v-if="value.params != null">
        <tr>
          <th>参数名称</th>
          <th>是否必须</th>
          <th>正则规则</th>
          <th>备注</th>
        </tr>
        <tr v-for="val in value.params">
          <td>{{val.name}}</td>
          <td>{{val.require}}</td>
          <td>{{val.pattern}}</td>
          <td>{{val.tip}}</td>
        </tr>
      </table>
      <h3>curl请求示例</h3>
      <p>
        <code>{{value.reqExample}}</code>
      </p>
      <hr>
    </div>
  </div>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        item: []
      },
      methods: {
        getInfo: function () {
          fetch("http://132.35.224.151:8018/info").then(resp => resp.json()).then(data => {
            this.item = data
          }).catch(e => console.log(e))
        }
      }
    })
    app.getInfo()
  </script>
</body>

</html>